<template>
  <div class="feedbacks-container">
    <div class="page-header">
      <h1>用户反馈管理</h1>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="filter-section">
      <div class="search-box">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索反馈内容、用户..."
          @input="debounceSearch"
        />
        <i class="fa fa-search"></i>
      </div>
      <div class="filter-controls">
        <select v-model="statusFilter" @change="applyFilters">
          <option value="all">全部状态</option>
          <option value="pending">待处理</option>
          <option value="processing">处理中</option>
          <option value="resolved">已解决</option>
          <option value="closed">已关闭</option>
        </select>
        <select v-model="typeFilter" @change="applyFilters">
          <option value="all">全部类型</option>
          <option value="bug">Bug反馈</option>
          <option value="suggestion">功能建议</option>
          <option value="question">使用问题</option>
          <option value="other">其他</option>
        </select>
        <select v-model="sortBy" @change="applyFilters">
          <option value="createdTime">创建时间</option>
          <option value="status">状态</option>
          <option value="priority">优先级</option>
        </select>
        <select v-model="sortOrder" @change="applyFilters">
          <option value="desc">降序</option>
          <option value="asc">升序</option>
        </select>
      </div>
    </div>
    
    <!-- 反馈列表 -->
    <div class="feedbacks-list">
      <table class="feedbacks-table">
        <thead>
          <tr>
            <th width="5%">
              <input 
                v-model="selectAll" 
                type="checkbox"
                @change="toggleSelectAll"
              />
            </th>
            <th width="8%">ID</th>
            <th width="12%">用户</th>
            <th width="10%">类型</th>
            <th width="30%">内容摘要</th>
            <th width="8%">优先级</th>
            <th width="10%">状态</th>
            <th width="15%">创建时间</th>
            <th width="12%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr 
            v-for="feedback in paginatedFeedbacks" 
            :key="feedback.id"
            :class="{ 'highlight': feedback.status === 'pending', 'resolved': feedback.status === 'resolved' }"
          >
            <td>
              <input 
                v-model="selectedFeedbacks" 
                type="checkbox"
                :value="feedback.id"
              />
            </td>
            <td class="id-column">{{ feedback.id }}</td>
            <td class="user-column">
              <div class="user-info">
                <div class="user-avatar" :style="{ backgroundColor: getAvatarColor(feedback.username) }">{{ getInitial(feedback.username) }}</div>
                <div class="user-details">
                  <div class="username">{{ feedback.username }}</div>
                  <div class="email">{{ feedback.email }}</div>
                </div>
              </div>
            </td>
            <td>
              <span class="type-badge" :class="feedback.type">
                {{ getTypeLabel(feedback.type) }}
              </span>
            </td>
            <td class="content-column">{{ getContentSummary(feedback.content) }}</td>
            <td>
              <span class="priority-badge" :class="feedback.priority">
                {{ getPriorityLabel(feedback.priority) }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="feedback.status">
                {{ getStatusLabel(feedback.status) }}
              </span>
            </td>
            <td>{{ formatDate(feedback.createdTime) }}</td>
            <td>
              <div class="table-actions">
                <button class="action-btn view-btn" @click="viewFeedback(feedback)">查看</button>
                <button class="action-btn process-btn" @click="processFeedback(feedback)">处理</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="paginatedFeedbacks.length === 0" class="empty-state">
        <i class="fa fa-comment-o"></i>
        <p>暂无反馈信息</p>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredFeedbacks.length > 0" class="pagination">
      <div class="pagination-info">
        显示 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize, filteredFeedbacks.length) }} 条，共 {{ filteredFeedbacks.length }} 条
      </div>
      <div class="pagination-controls">
        <button 
          :disabled="currentPage === 1" 
          class="pagination-btn"
          @click="currentPage = 1"
        >
          首页
        </button>
        <button 
          :disabled="currentPage === 1" 
          class="pagination-btn"
          @click="currentPage--"
        >
          <i class="fa fa-chevron-left"></i>
        </button>
        <button 
          v-for="page in pageNumbers" 
          :key="page"
          :class="['pagination-btn', { active: currentPage === page }]"
          @click="currentPage = page"
        >
          {{ page }}
        </button>
        <button 
          :disabled="currentPage === totalPages" 
          class="pagination-btn"
          @click="currentPage++"
        >
          <i class="fa fa-chevron-right"></i>
        </button>
        <button 
          :disabled="currentPage === totalPages" 
          class="pagination-btn"
          @click="currentPage = totalPages"
        >
          末页
        </button>
      </div>
    </div>
    
    <!-- 批量操作 -->
    <div v-if="selectedFeedbacks.length > 0" class="batch-actions">
      <div class="selected-info">
        已选择 {{ selectedFeedbacks.length }} 条反馈
      </div>
      <div class="batch-buttons">
        <button class="batch-btn process-btn" @click="batchChangeStatus('processing')">标为处理中</button>
        <button class="batch-btn resolved-btn" @click="batchChangeStatus('resolved')">标为已解决</button>
        <button class="batch-btn closed-btn" @click="batchChangeStatus('closed')">关闭</button>
        <button class="batch-btn delete-btn" @click="batchDelete">删除</button>
        <button class="batch-btn cancel-btn" @click="selectedFeedbacks = []">取消选择</button>
      </div>
    </div>
    
    <!-- 反馈详情对话框 -->
    <div v-if="showFeedbackDialog" class="dialog-overlay" @click="closeFeedbackDialog">
      <div class="dialog feedback-dialog" @click.stop>
        <div class="dialog-header">
          <h3>反馈详情 #{{ currentFeedback.id }}</h3>
          <div class="dialog-header-actions">
            <select v-model="currentFeedback.status" @change="updateFeedbackStatus">
              <option value="pending">待处理</option>
              <option value="processing">处理中</option>
              <option value="resolved">已解决</option>
              <option value="closed">已关闭</option>
            </select>
            <button class="close-button" @click="closeFeedbackDialog">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
        <div class="dialog-content">
          <!-- 反馈基本信息 -->
          <div class="feedback-info">
            <div class="info-row">
              <div class="info-group">
                <label>反馈类型</label>
                <span class="type-badge" :class="currentFeedback.type">{{ getTypeLabel(currentFeedback.type) }}</span>
              </div>
              <div class="info-group">
                <label>优先级</label>
                <span class="priority-badge" :class="currentFeedback.priority">{{ getPriorityLabel(currentFeedback.priority) }}</span>
              </div>
              <div class="info-group">
                <label>创建时间</label>
                <span>{{ formatDateTime(currentFeedback.createdTime) }}</span>
              </div>
              <div class="info-group">
                <label>最后更新</label>
                <span>{{ formatDateTime(currentFeedback.updatedTime) }}</span>
              </div>
            </div>
            
            <div class="info-row">
              <div class="info-group user-info-group">
                <label>提交用户</label>
                <div class="user-info">
                  <div class="user-avatar" :style="{ backgroundColor: getAvatarColor(currentFeedback.username) }">{{ getInitial(currentFeedback.username) }}</div>
                  <div class="user-details">
                    <div class="username">{{ currentFeedback.username }}</div>
                    <div class="email">{{ currentFeedback.email }}</div>
                    <div class="user-id">用户ID: {{ currentFeedback.userId }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 反馈内容 -->
          <div class="feedback-content">
            <h4>反馈内容</h4>
            <div class="content-text">{{ currentFeedback.content }}</div>
          </div>
          
          <!-- 反馈截图 -->
          <div v-if="currentFeedback.screenshots && currentFeedback.screenshots.length > 0" class="feedback-screenshots">
            <h4>截图 ({{ currentFeedback.screenshots.length }})</h4>
            <div class="screenshots-grid">
              <div 
                v-for="(screenshot, index) in currentFeedback.screenshots" 
                :key="index"
                class="screenshot-item"
                @click="previewImage(screenshot)"
              >
                <img :src="screenshot" :alt="`反馈截图 ${index + 1}`" />
              </div>
            </div>
          </div>
          
          <!-- 操作记录 -->
          <div v-if="currentFeedback.history && currentFeedback.history.length > 0" class="feedback-history">
            <h4>处理记录</h4>
            <div class="history-list">
              <div 
                v-for="(record, index) in currentFeedback.history" 
                :key="index"
                class="history-item"
              >
                <div class="history-header">
                  <span class="history-author">{{ record.author }}</span>
                  <span class="history-time">{{ formatDateTime(record.time) }}</span>
                </div>
                <div class="history-content">{{ record.content }}</div>
              </div>
            </div>
          </div>
          
          <!-- 添加回复 -->
          <div class="feedback-reply">
            <h4>添加回复</h4>
            <form @submit.prevent="submitReply">
              <textarea 
                v-model="replyContent" 
                placeholder="请输入回复内容..."
                rows="4"
              ></textarea>
              <div class="reply-actions">
                <select v-model="replyStatusUpdate">
                  <option value="">不修改状态</option>
                  <option value="processing">标为处理中</option>
                  <option value="resolved">标为已解决</option>
                  <option value="closed">关闭</option>
                </select>
                <button type="submit" class="submit-reply-btn">发送回复</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 处理反馈对话框 -->
    <div v-if="showProcessDialog" class="dialog-overlay" @click="closeProcessDialog">
      <div class="dialog process-dialog" @click.stop>
        <div class="dialog-header">
          <h3>处理反馈</h3>
          <button class="close-button" @click="closeProcessDialog">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="submitProcess">
            <div class="form-group">
              <label>处理状态</label>
              <select v-model="processForm.status">
                <option value="processing">处理中</option>
                <option value="resolved">已解决</option>
                <option value="closed">已关闭</option>
              </select>
            </div>
            <div class="form-group">
              <label>优先级</label>
              <select v-model="processForm.priority">
                <option value="low">低</option>
                <option value="medium">中</option>
                <option value="high">高</option>
                <option value="critical">紧急</option>
              </select>
            </div>
            <div class="form-group">
              <label>处理备注</label>
              <textarea v-model="processForm.note" placeholder="请输入处理备注..." rows="4"></textarea>
            </div>
            <div class="dialog-footer">
              <button type="button" class="cancel-button" @click="closeProcessDialog">取消</button>
              <button type="submit" class="submit-button">提交处理</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 图片预览 -->
    <div v-if="previewImageUrl" class="image-preview-overlay" @click="closeImagePreview">
      <div class="image-preview-container" @click.stop>
        <button class="close-preview-button" @click="closeImagePreview">
          <i class="fa fa-times"></i>
        </button>
        <img :src="previewImageUrl" alt="预览图片" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FeedbacksView',
  data() {
    return {
      // 搜索和筛选
      searchQuery: '',
      statusFilter: 'all',
      typeFilter: 'all',
      sortBy: 'createdTime',
      sortOrder: 'desc',
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      
      // 选择
      selectedFeedbacks: [],
      selectAll: false,
      
      // 对话框
      showFeedbackDialog: false,
      showProcessDialog: false,
      currentFeedback: {},
      replyContent: '',
      replyStatusUpdate: '',
      processForm: {
        status: 'processing',
        priority: 'medium',
        note: '',
      },
      
      // 图片预览
      previewImageUrl: '',
      
      // 反馈列表数据（模拟数据）
      feedbacks: [
        {
          id: 'FB001',
          userId: 'U1001',
          username: '张三',
          email: 'zhangsan@example.com',
          type: 'bug',
          content: '登录页面在移动端显示异常，点击登录按钮没有响应。我使用的是iPhone 13，Safari浏览器。问题发生在昨天晚上8点左右。',
          priority: 'high',
          status: 'pending',
          screenshots: ['https://picsum.photos/id/1/300/200'],
          createdTime: '2024-05-15T10:30:00Z',
          updatedTime: '2024-05-15T10:30:00Z',
          history: [],
        },
        {
          id: 'FB002',
          userId: 'U1002',
          username: '李四',
          email: 'lisi@example.com',
          type: 'suggestion',
          content: '建议增加视频下载功能，方便用户离线观看。同时希望能增加播放速度调节功能，比如0.5x、1.5x、2x等选项。',
          priority: 'medium',
          status: 'processing',
          screenshots: [],
          createdTime: '2024-05-14T16:45:00Z',
          updatedTime: '2024-05-14T18:00:00Z',
          history: [
            {
              author: 'admin',
              time: '2024-05-14T18:00:00Z',
              content: '已收到建议，正在评估实现可行性。',
            },
          ],
        },
        {
          id: 'FB003',
          userId: 'U1003',
          username: '王五',
          email: 'wangwu@example.com',
          type: 'question',
          content: '请问如何修改个人头像？我在设置页面没有找到相关选项。另外，我的账号被限制了上传视频，这是为什么？',
          priority: 'low',
          status: 'resolved',
          screenshots: [],
          createdTime: '2024-05-13T09:20:00Z',
          updatedTime: '2024-05-13T11:30:00Z',
          history: [
            {
              author: 'admin',
              time: '2024-05-13T11:30:00Z',
              content: '个人头像修改功能在个人中心-编辑资料中。账号被限制上传是因为上传内容违反了社区规范，请检查并删除违规内容后联系客服申请解封。',
            },
          ],
        },
        {
          id: 'FB004',
          userId: 'U1004',
          username: '赵六',
          email: 'zhaoliu@example.com',
          type: 'bug',
          content: '视频播放时经常出现卡顿现象，特别是高清视频。我的网络是100Mbps光纤，应该不是网络问题。希望能尽快解决。',
          priority: 'critical',
          status: 'closed',
          screenshots: ['https://picsum.photos/id/2/300/200', 'https://picsum.photos/id/3/300/200'],
          createdTime: '2024-05-12T14:10:00Z',
          updatedTime: '2024-05-13T16:45:00Z',
          history: [
            {
              author: 'admin',
              time: '2024-05-12T15:00:00Z',
              content: '我们已收到您的反馈，技术团队正在排查视频卡顿问题。',
            },
            {
              author: 'admin',
              time: '2024-05-13T16:45:00Z',
              content: '问题已解决，我们优化了视频转码和分发流程。请刷新页面后重试，如果仍有问题请继续反馈。',
            },
          ],
        },
        {
          id: 'FB005',
          userId: 'U1005',
          username: '孙七',
          email: 'sunqi@example.com',
          type: 'other',
          content: '网站整体体验非常好，界面设计很清爽，功能也很全面。希望能继续保持并不断优化！',
          priority: 'low',
          status: 'resolved',
          screenshots: [],
          createdTime: '2024-05-11T11:50:00Z',
          updatedTime: '2024-05-11T12:00:00Z',
          history: [
            {
              author: 'admin',
              time: '2024-05-11T12:00:00Z',
              content: '感谢您的肯定和支持！我们会继续努力提供更好的服务。',
            },
          ],
        },
      ],
    }
  },
  computed: {
    filteredFeedbacks() {
      let result = [...this.feedbacks]
      
      // 应用搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(feedback => 
          feedback.content.toLowerCase().includes(query) ||
          feedback.username.toLowerCase().includes(query) ||
          feedback.email.toLowerCase().includes(query) ||
          feedback.id.toLowerCase().includes(query),
        )
      }
      
      // 应用状态筛选
      if (this.statusFilter !== 'all') {
        result = result.filter(feedback => feedback.status === this.statusFilter)
      }
      
      // 应用类型筛选
      if (this.typeFilter !== 'all') {
        result = result.filter(feedback => feedback.type === this.typeFilter)
      }
      
      // 应用排序
      result.sort((a, b) => {
        let aValue = a[this.sortBy]
        let bValue = b[this.sortBy]
        
        // 对于优先级，我们给它一个数值以便排序
        if (this.sortBy === 'priority') {
          const priorityValues = { low: 1, medium: 2, high: 3, critical: 4 }
          aValue = priorityValues[aValue]
          bValue = priorityValues[bValue]
        }
        
        // 对于日期，我们将其转换为时间戳
        if (this.sortBy === 'createdTime' || this.sortBy === 'updatedTime') {
          aValue = new Date(aValue).getTime()
          bValue = new Date(bValue).getTime()
        }
        
        return this.sortOrder === 'asc' ? aValue > bValue : aValue < bValue
      })
      
      return result
    },
    paginatedFeedbacks() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredFeedbacks.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredFeedbacks.length / this.pageSize)
    },
    pageNumbers() {
      const numbers = []
      const total = this.totalPages
      const current = this.currentPage
      
      // 生成页码数组，最多显示10个页码
      let startPage = Math.max(1, current - 4)
      const endPage = Math.min(total, startPage + 9)
      
      if (endPage - startPage < 9) {
        startPage = Math.max(1, endPage - 9)
      }
      
      for (let i = startPage; i <= endPage; i++) {
        numbers.push(i)
      }
      
      return numbers
    },
  },
  watch: {
    selectedFeedbacks() {
      this.selectAll = this.selectedFeedbacks.length === this.filteredFeedbacks.length && this.filteredFeedbacks.length > 0
    },
  },
  mounted() {
    // 在实际应用中，这里应该调用API获取反馈列表
    console.log('反馈管理页面已加载')
  },
  methods: {
    // 搜索相关
    debounceSearch() {
      if (this.searchTimeout) {
        clearTimeout(this.searchTimeout)
      }
      this.searchTimeout = setTimeout(() => {
        this.currentPage = 1
      }, 500)
    },
    applyFilters() {
      this.currentPage = 1
    },
    
    // 选择相关
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedFeedbacks = this.filteredFeedbacks.map(feedback => feedback.id)
      } else {
        this.selectedFeedbacks = []
      }
    },
    
    // 批量操作
    batchChangeStatus(status) {
      if (confirm(`确定要将选中的 ${this.selectedFeedbacks.length} 条反馈状态更改为 "${this.getStatusLabel(status)}" 吗？`)) {
        // 在实际应用中，这里应该调用API
        this.feedbacks.forEach(feedback => {
          if (this.selectedFeedbacks.includes(feedback.id)) {
            feedback.status = status
            feedback.updatedTime = new Date().toISOString()
          }
        })
        this.selectedFeedbacks = []
        alert('状态更新成功！')
      }
    },
    batchDelete() {
      if (confirm(`确定要删除选中的 ${this.selectedFeedbacks.length} 条反馈吗？此操作不可撤销！`)) {
        // 在实际应用中，这里应该调用API
        this.feedbacks = this.feedbacks.filter(feedback => !this.selectedFeedbacks.includes(feedback.id))
        this.selectedFeedbacks = []
        alert('删除成功！')
      }
    },
    
    // 查看反馈
    viewFeedback(feedback) {
      this.currentFeedback = { ...feedback }
      this.replyContent = ''
      this.replyStatusUpdate = ''
      this.showFeedbackDialog = true
    },
    closeFeedbackDialog() {
      this.showFeedbackDialog = false
      // 如果有修改，更新原数据
      const originalFeedback = this.feedbacks.find(f => f.id === this.currentFeedback.id)
      if (originalFeedback) {
        Object.assign(originalFeedback, this.currentFeedback)
      }
    },
    
    // 处理反馈
    processFeedback(feedback) {
      this.currentFeedback = { ...feedback }
      this.processForm = {
        status: feedback.status,
        priority: feedback.priority,
        note: '',
      }
      this.showProcessDialog = true
    },
    closeProcessDialog() {
      this.showProcessDialog = false
    },
    submitProcess() {
      // 在实际应用中，这里应该调用API
      this.currentFeedback.status = this.processForm.status
      this.currentFeedback.priority = this.processForm.priority
      this.currentFeedback.updatedTime = new Date().toISOString()
      
      // 添加处理记录
      if (this.processForm.note) {
        if (!this.currentFeedback.history) {
          this.currentFeedback.history = []
        }
        this.currentFeedback.history.push({
          author: 'admin',
          time: new Date().toISOString(),
          content: this.processForm.note,
        })
      }
      
      // 更新原数据
      const originalFeedback = this.feedbacks.find(f => f.id === this.currentFeedback.id)
      if (originalFeedback) {
        Object.assign(originalFeedback, this.currentFeedback)
      }
      
      this.showProcessDialog = false
      alert('处理成功！')
    },
    
    // 回复反馈
    submitReply() {
      if (!this.replyContent.trim()) {
        alert('回复内容不能为空！')
        return
      }
      
      // 在实际应用中，这里应该调用API
      
      // 添加回复记录
      if (!this.currentFeedback.history) {
        this.currentFeedback.history = []
      }
      this.currentFeedback.history.push({
        author: 'admin',
        time: new Date().toISOString(),
        content: this.replyContent,
      })
      
      // 更新状态
      if (this.replyStatusUpdate) {
        this.currentFeedback.status = this.replyStatusUpdate
      }
      
      this.currentFeedback.updatedTime = new Date().toISOString()
      
      this.replyContent = ''
      this.replyStatusUpdate = ''
      
      alert('回复成功！')
    },
    
    // 更新反馈状态
    updateFeedbackStatus() {
      this.currentFeedback.updatedTime = new Date().toISOString()
    },
    
    // 图片预览
    previewImage(url) {
      this.previewImageUrl = url
    },
    closeImagePreview() {
      this.previewImageUrl = ''
    },
    
    // 辅助函数
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      })
    },
    formatDateTime(dateString) {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      })
    },
    getContentSummary(content) {
      return content.length > 50 ? content.substring(0, 50) + '...' : content
    },
    getTypeLabel(type) {
      const labels = {
        bug: 'Bug反馈',
        suggestion: '功能建议',
        question: '使用问题',
        other: '其他',
      }
      return labels[type] || type
    },
    getPriorityLabel(priority) {
      const labels = {
        low: '低',
        medium: '中',
        high: '高',
        critical: '紧急',
      }
      return labels[priority] || priority
    },
    getStatusLabel(status) {
      const labels = {
        pending: '待处理',
        processing: '处理中',
        resolved: '已解决',
        closed: '已关闭',
      }
      return labels[status] || status
    },
    getAvatarColor(username) {
      const colors = ['#3498db', '#e74c3c', '#2ecc71', '#9b59b6', '#f39c12', '#1abc9c']
      let hash = 0
      for (let i = 0; i < username.length; i++) {
        hash = username.charCodeAt(i) + ((hash << 5) - hash)
      }
      return colors[Math.abs(hash) % colors.length]
    },
    getInitial(username) {
      return username.charAt(0).toUpperCase()
    },
  },
}
</script>

<style scoped>
.feedbacks-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
}

/* 筛选部分 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-box i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
}

.filter-controls {
  display: flex;
  gap: 10px;
}

.filter-controls select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

/* 反馈列表 */
.feedbacks-list {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.feedbacks-table {
  width: 100%;
  border-collapse: collapse;
}

.feedbacks-table th,
.feedbacks-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.feedbacks-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.feedbacks-table tr:hover {
  background: #f8f9fa;
}

.feedbacks-table tr.highlight {
  background: #fff3cd;
}

.feedbacks-table tr.resolved {
  background: #d4edda;
  opacity: 0.8;
}

.id-column {
  font-family: monospace;
  color: #7f8c8d;
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-details .username {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.user-details .email {
  color: #7f8c8d;
  font-size: 12px;
}

/* 标签样式 */
.type-badge,
.priority-badge,
.status-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.bug {
  background: #e74c3c;
  color: white;
}

.type-badge.suggestion {
  background: #3498db;
  color: white;
}

.type-badge.question {
  background: #f39c12;
  color: white;
}

.type-badge.other {
  background: #95a5a6;
  color: white;
}

.priority-badge.low {
  background: #2ecc71;
  color: white;
}

.priority-badge.medium {
  background: #f39c12;
  color: white;
}

.priority-badge.high {
  background: #e67e22;
  color: white;
}

.priority-badge.critical {
  background: #e74c3c;
  color: white;
}

.status-badge.pending {
  background: #f39c12;
  color: white;
}

.status-badge.processing {
  background: #3498db;
  color: white;
}

.status-badge.resolved {
  background: #2ecc71;
  color: white;
}

.status-badge.closed {
  background: #95a5a6;
  color: white;
}

/* 内容摘要 */
.content-column {
  color: #34495e;
  line-height: 1.4;
}

/* 表格操作 */
.table-actions {
  display: flex;
  gap: 5px;
}

.action-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.view-btn {
  background: #3498db;
  color: white;
}

.view-btn:hover {
  background: #2980b9;
}

.process-btn {
  background: #2ecc71;
  color: white;
}

.process-btn:hover {
  background: #27ae60;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-top: 1px solid #eee;
}

.pagination-info {
  color: #7f8c8d;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  gap: 5px;
}

.pagination-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
  color: #3498db;
}

.pagination-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 批量操作 */
.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-top: 15px;
}

.selected-info {
  font-weight: 500;
  color: #2c3e50;
}

.batch-buttons {
  display: flex;
  gap: 10px;
}

.batch-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.batch-btn.process-btn {
  background: #3498db;
  color: white;
}

.batch-btn.resolved-btn {
  background: #2ecc71;
  color: white;
}

.batch-btn.closed-btn {
  background: #95a5a6;
  color: white;
}

.batch-btn.delete-btn {
  background: #e74c3c;
  color: white;
}

.batch-btn.cancel-btn {
  background: #ecf0f1;
  color: #7f8c8d;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.feedback-dialog {
  max-width: 900px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.dialog-header-actions select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.dialog-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #95a5a6;
}

.dialog-content {
  padding: 20px;
}

/* 反馈详情 */
.feedback-info {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-group {
  flex: 1;
  min-width: 200px;
}

.info-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #7f8c8d;
  font-size: 14px;
}

.user-info-group .user-info {
  margin-top: 5px;
}

.user-info-group .user-details .user-id {
  color: #95a5a6;
  font-size: 12px;
  margin-top: 2px;
}

/* 反馈内容 */
.feedback-content {
  margin-bottom: 20px;
}

.feedback-content h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 16px;
}

.content-text {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  color: #34495e;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 反馈截图 */
.feedback-screenshots {
  margin-bottom: 20px;
}

.feedback-screenshots h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 16px;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.screenshot-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
}

.screenshot-item:hover {
  transform: scale(1.02);
}

.screenshot-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* 处理记录 */
.feedback-history {
  margin-bottom: 20px;
}

.feedback-history h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 16px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.history-item {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  position: relative;
  padding-left: 40px;
}

.history-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3498db;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-author {
  font-weight: 500;
  color: #2c3e50;
}

.history-time {
  color: #95a5a6;
  font-size: 12px;
}

.history-content {
  color: #34495e;
  line-height: 1.5;
}

/* 添加回复 */
.feedback-reply {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.feedback-reply h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 16px;
}

.feedback-reply textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.reply-actions select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.submit-reply-btn {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.submit-reply-btn:hover {
  background: #2980b9;
}

/* 处理对话框 */
.process-dialog {
  max-width: 500px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #34495e;
}

.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button,
.submit-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cancel-button {
  background: #ecf0f1;
  color: #7f8c8d;
}

.cancel-button:hover {
  background: #bdc3c7;
}

.submit-button {
  background: #3498db;
  color: white;
}

.submit-button:hover {
  background: #2980b9;
}

/* 图片预览 */
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.image-preview-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.image-preview-container img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.close-preview-button {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    max-width: none;
  }
  
  .filter-controls {
    flex-wrap: wrap;
  }
  
  .filter-controls select {
    flex: 1;
    min-width: 150px;
  }
  
  .feedbacks-table {
    font-size: 14px;
  }
  
  .feedbacks-table th,
  .feedbacks-table td {
    padding: 8px;
  }
  
  .table-actions {
    flex-direction: column;
    gap: 3px;
  }
  
  .pagination {
    flex-direction: column;
    gap: 15px;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .batch-buttons {
    flex-wrap: wrap;
  }
  
  .batch-btn {
    flex: 1;
    min-width: 120px;
  }
  
  .info-row {
    flex-direction: column;
  }
  
  .dialog-header-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  
  .reply-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .reply-actions select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .feedbacks-table {
    font-size: 12px;
  }
  
  .feedbacks-table th,
  .feedbacks-table td {
    padding: 6px 4px;
  }
  
  .action-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .user-details {
    max-width: 100px;
  }
  
  .user-details .username,
  .user-details .email {
    font-size: 12px;
  }
  
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .screenshots-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>